<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>

<script>
  let myChart = echarts.init(document.querySelector("div"))
  let option = {
    yAxis: [
      {
        type: "category",
        data: ["张三", "李四", "王五", "赵六"],
        axisTick: {
          alignWithLabel: true
        },
        inverse: true
      }, {
        type: "category",
        data: ["zhangsan", "lisi", "wangwu", "zhaoliu"],
        axisTick: {
          alignWithLabel: true
        },
        inverse: true
      }
    ],
    xAxis: {

    },
    series: [
      {
        name: "2011",
        type: "bar",
        data: [
          { name: "张三", value: 100 },
          { name: "李四", value: 120 },
          { name: "王五", value: 80 },
          { name: "赵六", value: 90 },
        ],
        barWidth: 40,
        itemStyle: {
          borderRadius: 30
        },
        yAxisIndex: 0

      }, {
        name: "2012",
        type: "bar",
        data: [
          { name: "张三", value: 180 },
          { name: "李四", value: 160 },
          { name: "王五", value: 180 },
          { name: "赵六", value: 190 },
        ],
        itemStyle: {
          color: "none",
          borderColor: "red",
          borderRadius: 30
        },
        yAxisIndex: 1
      }
    ]

  }
  myChart.setOption(option)
</script>

</html>